import React, { useState } from "react";

import { Button, Card, Statistic } from "antd";
import SetChangePassword from "../../components/SetChangePassword";
import SetChangePhone from "../../components/SetChangePhone";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import { ProCard } from "@ant-design/pro-components";

import SetKeyModle from "../../components/SetKeyModle";

import style from "./accountpasswordset.module.scss";
const { Divider } = ProCard;

export default function AccountPasswordSet() {
  const [responsive, setResponsive] = useState(false);
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [open, setOpen] = useState(false);
  const [openKey, setOpenKey] = useState(false);
  const [phoneOpen, setphoneOpen] = useState(false);
  const [titleflag, setTitleflag] = useState(1);
  const [phoneTitleflag, setPhoneTitleflag] = useState(1);

  const showModal = () => {
    setOpen(true);
  };

  const hideModal = () => {
    setOpen(false);
    setTitleflag(1);
  };
  const showPhoneModal = () => {
    setphoneOpen(true);
  };

  const hidePhoneModal = () => {
    setphoneOpen(false);
    setPhoneTitleflag(1);
  };

  const showKeyModal = () => {
    setOpenKey(true);
  };
  const hideKeyModal = () => {
    setOpenKey(false);
  };
  return (
    <div className={style.AccountPasswordSetboss}>
      <ProCard
        title={t("layout.AccountPasswordSettings")}
        direction={responsive ? "column" : "row"}
        style={{ marginBlockStart: 8 }}
        gutter={[16, 16]}
        wrap
      >
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic
            title={t("login.password")} //登录密码
            value={t("message.PasswordLoggingInto")}
            precision={2}
          />
          <Button
            type="link"
            onClick={() => {
              setOpen(true);
            }}
          >
            {/* 修改 */}
            {t("buttons.Modify")}
          </Button>
        </ProCard>
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic
            title={t("form.Transactionpassword")}
            value={t("message.WhenTheAccount")}
            precision={2}
          />
          <Button
            type="link"
            onClick={() => {
              setOpen(true);
              setTitleflag(2);
            }}
          >
            {/* 修改 */}
            {t("buttons.Modify")}
          </Button>
        </ProCard>

        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic title={t("login.PhoneNumber")} value={13291035650} />
          <Button
            type="link"
            onClick={() => {
              showPhoneModal(true);
            }}
          >
            {t("buttons.Modify")}
            {/* 修改 */}
          </Button>
        </ProCard>

        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic title={t("login.mailbox")} value={"1453625725@qq.com"} />
          <Button
            type="link"
            onClick={() => {
              showPhoneModal(true);
              setPhoneTitleflag(2);
            }}
          >
            {t("buttons.Modify")}
            {/* 修改 */}
          </Button>
        </ProCard>

        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic title="密钥设置" value=" " />
          <Button
            type="link"
            onClick={() => {
              showKeyModal(true);
            }}
          >
            {t("buttons.Modify")}
            {/* 修改 */}
          </Button>
        </ProCard>
      </ProCard>
      {/* </RcResizeObserver> */}
      <SetChangePhone
        showModal={showPhoneModal}
        hideModal={hidePhoneModal}
        open={phoneOpen}
        titleflag={phoneTitleflag}
      />
      <SetChangePassword
        showModal={showModal}
        hideModal={hideModal}
        open={open}
        titleflag={titleflag}
      />

      <SetKeyModle
        showModal={showKeyModal}
        hideModal={hideKeyModal}
        open={openKey}
      />
    </div>
  );
}
